<template>
  <el-container style="height: 100vh;">
    <!-- 顶部导航栏 -->
<!--    <el-header class="top-nav">-->
<!--      <h2 class="title">和谐大功率机车车载数据专家分析系统 - 数据下载</h2>-->
<!--    </el-header>-->
    <el-container>
      <el-aside class="sidebar">
        <el-menu
          :default-openeds="['1']"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"
        >
          <el-menu-item
            v-for="(menu, index) in menuItems"
            :key="index"
            :index="menu.index"
            @click="handleMenuItemClick(menu.label)"
          >
            <i :class="menu.icon"></i>
            <span slot="title">{{ menu.label }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="main-content">
        <el-row :gutter="20" >
          <el-col :span="20">
            <el-row :gutter="20" style="height: 330px">
              <download-statuses
                :statuses="downloadStatuses"
                @update-status="updateDownloadStatus"
              />
            </el-row>

            <el-row :gutter="20">
              <DownloadInfo></DownloadInfo>
            </el-row>
          </el-col>
          <el-col :span="4">
            <download-list :list="downloadList" />
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>数据导出和导入</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import DownloadStatuses from './DownloadStatuses.vue'
import DownloadList from './DownloadList.vue'
import DownloadInfo from './DownloadInfo.vue'

export default {
  components: {
    DownloadStatuses,
    DownloadList,
    DownloadInfo
  },
  data() {
    return {
      dialogVisible: false,
      isCollapse: false,
      menuItems: [
        { label: '原始数据导出', index: '1-1', icon: 'el-icon-upload2' },
        { label: '原始数据导入', index: '1-2', icon: 'el-icon-download' }
      ],
      downloadStatuses: [
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        }
        // ...更多状态
      ],
      downloadList: [
        {
          operator: '李四',
          downloadStatus: '已完成',
          downloadingModel: 'HXD3B-5678',
          downloadProgress: 100,
          dumpingModel: 'HXD3B-5678',
          dumpingStatus: '已完成',
          dumpingProgress: 100
        }
      ]
    }
  },
  methods: {
    handleMenuItemClick(item) {
      this.dialogVisible = true
      console.log(`Menu item clicked: ${item}`)
      // 处理菜单点击逻辑
    },
    updateDownloadStatus(status) {
      // 更新下载状态逻辑
      console.log('Download status updated:', status)
    }
  }
}
</script>

<style scoped>
.top-nav {
  background-color: #409EFF;
  color: #fff;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.title {
  margin: 0;
}

.sidebar {
  width: 170px !important;
  background-color: #545c64;
  color: #fff;
  height: 100%;
  transition: width 0.3s;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.12), 2px 0 6px rgba(0, 0, 0, 0.04);
}

.sidebar .el-menu {
  border-right: none;
}

.main-content {
  background-color: #ffffff;
  padding: 20px;
  transition: padding 0.3s;
}

.el-menu-item:hover {
  background-color: #434a50 !important;
}

@media (max-width: 100px) {
  .sidebar {
    width: 40px !important;
  }

  .main-content {
    padding: 10px;
  }
}

/* 添加侧边栏折叠动画 */
.sidebar-collapse-transition {
  transition: width 0.3s;
}

/* 折叠后的侧边栏样式 */
.sidebar-collapse {
  width: 65px !important;
}

.sidebar-collapse .el-menu-item span {
  display: none;
}

.sidebar-collapse .el-menu-item i {
  font-size: 20px;
  margin-right: 0;
}

.dialog-footer .el-button {
  margin-right: 10px;
}

/* 增加一些间距 */
.el-row {
  margin-bottom: 20px;
}

/* 优化表格样式 */
.el-table {
  border: 1px solid #dfe6ec;
}

.el-table th, .el-table tr {
  background-color: #f5f7fa;
}

.el-table__body-wrapper {
  overflow-x: auto;
}

/* 优化按钮样式 */
.el-button {
  border-radius: 4px;
}

/* 优化进度条样式 */
.el-progress-bar {
  margin-right: 10px;
}

/* 优化对话框样式 */
.el-dialog__header {
  background-color: #f5f7fa;
  padding: 20px;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  padding: 20px;
}
</style>
